<template>
	<view class="lotteryDraw">
		<view class="total_points">
			<image src="https://wx.2024csnl.com/static/jfcj_bcg.png" mode=""></image>
			<view class="">
				<text>我的权证值：</text>
				<text style="font-weight: bold;">{{userScore}}</text>
			</view>
		</view>
		<aylottery :type="2" :list="list" themeColor="#940000" bgColor="#ffd906" bg_sd_Color="#41644A"
			@result="resultFun" @toDetailPage="toDetailPage" :consumeScore="needScore" :drowId="id"
			:pageType="pageType">
		</aylottery>
		<view class="winners">
			<view class="title">
				<view class="">
					<view class="">
						<image src="https://wx.2024csnl.com/static/hjmd.png" mode=""></image>
						<view class="">获奖名单</view>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="item">
					<view class="swiper">
						<view class="demo-list">
							<view class="rowup item_m flex" style="font-weight: 400;" v-for="(v,i) in prizeList"
								:key="i">
								{{v.text}}
								<view class="time">{{v.timetext}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="hintModalBox">
				<view class="title">抽奖说明</view>
				<view class="hint">
					<text>{{rule}}</text>
				</view>
				<view class="btn flex-center" @click="close('popup')">确认</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getPrizeMsg
	} from "../../../api/index.js"
	import aylottery from '@/components/ay-lottery/ay-lottery.vue';
	export default {
		components: {
			aylottery,
		},
		data() {
			return {
				prizeList: [],
				id: '', //抽奖id
				// stay_index_m: 1, //跑马灯
				stay_index_r_init: 4,
				stay_index_r: 1,
				stay_index_m_init: 4,
				chance_num_init: 6,
				list: [],
				rule: '',
				needScore: '',
				userScore: '', //用户积分(权证值)
				pageType: null, ////1=支付后进入页面，2=点击个人中心的链接
			}
		},
		onLoad(opt) {
			this.id = opt.id
			opt.pageType == 1 ? this.pageType = 1 : this.pageType = 2

			this.onGetPrizeMsg()
		},
		onNavigationBarButtonTap(e) {
			this.open('popup')
		},
		methods: {
			// 抽奖数据
			async onGetPrizeMsg() {
				const res = await getPrizeMsg('s=/ApiChoujiang/qzindex', {
					id: this.id
				})
				const {
					msg,
					data,
					status
				} = res.data
				if (status == 1) {
					this.list = data.jxarr.map(item => {
						return {
							name: item.mc,
							img: item.pic,
							tp: item.tp, // tp代表奖品类型1是商品4是积分
						}
					})
					this.prizeList = data.zjlist
					this.rule = data.info.guize
					this.lotteryNums = data.remaindaytimes
					this.needScore = data.info.usescore
					this.userScore = data.member.quanzheng
					// console.log(this.lotteryNums, 'rule')
				} else {
					this.showToast(msg)
				}
				// console.log(res, "res---")

			},
			resultFun(e) {
				this.onGetPrizeMsg()
			},
			resultFun_chance(e) {
				let that = this;

				let item = e.item;
				let index = e.curIndex;
				let list = e.list;

				//定义下一次转的位置
				that.stay_index_r = Math.round(Math.random() * (list.length - 1)); //随机数

				if (e.isAward) {
					// this.msg_modal('获得' + (item.name), '恭喜')
					let type = item.type;
					if (type == 1) {
						that.chance_num_init += item.val;
					}
				}
			},
			msg_modal(content, title = '温馨提示') {
				//统一提示方便全局修改
				if (Boolean(content) === false) {
					return;
				}
				uni.showModal({
					title: title,
					content: content,
					confirmText: '确定',
					showCancel: false,
					confirmColor: '#33CCCC',
					success(res) {
						if (res.confirm) {

						}
					}
				})

			},
			open(n) {
				this.$refs[n].open();
			},
			close(n) {
				this.$refs[n].close();
			},
			toDetailPage(e) {
				let list = e.list;
				let idx = e.curIndex;
				let list_img = [];
				let item = e.item;

				list.forEach(item => {
					list_img.push(item.img)
				})
				if (list_img && list_img.length > 0) {
					uni.previewImage({
						current: list_img[idx], //  传 Number H5端出现不兼容
						urls: list_img,
						indicator: "number",
						loop: true,
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #41644A;
	}

	//数据滚动
	.rowup {
		margin-bottom: 24rpx;
		line-height: 64rpx;
		margin-left: 30rpx;
	}

	@-webkit-keyframes rowup {
		0% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-webkit-transform: translate3d(0, -307px, 0);
			transform: translate3d(0, -307px, 0);
		}
	}

	@keyframes rowup {
		0% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-webkit-transform: translate3d(0, -307px, 0);
			transform: translate3d(0, -307px, 0);
		}
	}

	.demo-list {
		width: 100%;
		position: relative;
		height: 140px;
		overflow: hidden;
	}

	.demo-list .rowup {
		-webkit-animation: 10s rowup linear infinite normal;
		animation: 10s rowup linear infinite normal;
		position: relative;
	}

	.swiper {
		height: 300rpx;
		overflow: auto;
		position: absolute;
		padding: 0 20rpx;
		top: 80rpx;
		left: 30rpx;
		z-index: 9;
	}

	.swiper::-webkit-scrollbar {
		display: none
	}

	// popup
	.hintModalBox {
		padding: 30rpx;
		border-radius: 30rpx;
		width: 600rpx;
		background: #fff;
		height: 500rpx;
		overflow: auto;
		line-height: 50rpx;
		color: #333333;
		font-size: 32rpx;

		.title {
			color: #F40E2A;
		}

		.hint {
			font-size: 20rpx;
		}

		.btn {
			padding: 20rpx 150rpx;
			height: 60rpx;
			background: #F40E2A;
			color: #FFFFFF;
			border-radius: 20rpx;
		}
	}

	.lotteryDraw {
		padding: 20upx;
		box-sizing: border-box;

		.total_points {
			padding: 0 14upx;
			box-sizing: border-box;
			height: 106upx;
			position: relative;
			margin-bottom: 24upx;

			image {
				width: 100%;
				height: 106upx;
			}

			view {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				width: 100%;
				height: 106upx;
				padding-top: 36upx;
				box-sizing: border-box;
				text-align: center;
				color: #fff;
				font-size: 32upx;
			}
		}

		.winners {
			background-color: #FFE9C8;
			width: 100%;
			border-radius: 26upx;
			top: 620rpx;
			position: relative;

			.title {
				width: 100%;
				height: 76upx;

				>view {
					display: flex;
					justify-content: center;
					width: 100%;
					position: absolute;
					top: -10upx;
					left: 0;
					z-index: 2;

					>view {
						width: 404upx;
						height: 76upx;
						position: relative;

						image {
							width: 404upx;
							height: 76upx;
						}

						view {
							width: 404upx;
							height: 76upx;
							position: absolute;
							top: -4upx;
							left: 0;
							z-index: 3;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 34upx;
							color: #EA2F04;
						}
					}
				}
			}

			.item_m {
				font-size: 26upx;
				color: #835D2D;
				margin: 0 46upx 0 18upx;
			}

			.time {
				font-weight: 400;
				font-size: 20upx;
				color: #835D2D;
				margin-left: 30rpx;
			}

			.list {
				padding-bottom: 20upx;
				height: 300rpx;
				overflow: auto;

				.item {
					display: flex;
					align-items: center;
					padding: 10upx 38upx;
					box-sizing: border-box;

					image {
						width: 54upx;
						height: 54upx;
						border-radius: 50%;
					}


				}
			}
		}
	}
</style>